<!-- 秒杀专区 -->
<template>
    <div class="nev">
      <div class="seckilling">
        <div class="seckillingup">
          <div class="left">
            <span class="left1">嗨购秒杀</span>
            <span class="left2">{{ hour }}</span>
            <img class="left3" src="@/assets/点场.png" alt="" />
            <!-- <span v-text="times[0]" class="left4"></span>&nbsp;:&nbsp;
            <span v-text="times[1]" class="left4"></span>&nbsp;:&nbsp;
            <span v-text="times[2]" class="left4"></span> -->
            <van-count-down :time="time1">
              <template #default="timeData">
                <span class="block" style="border-radius: 3px">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block" style="border-radius: 3px">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block" style="border-radius: 3px">{{ timeData.seconds }}</span>
              </template>
            </van-count-down>
          </div>
          <div class="right">
            <span>爆款轮番秒</span>
            <img class="right1" src="@/assets/右箭头.png" alt="" />
          </div>
        </div>
        <div class="seckillingdown">
          <div class="seckillingdownson">
            <div
              @click="particulars(v)"
              class="goods"
              v-for="(v, index) in goodss"
              :key="index"
            >
              <img :src="v.img1" alt="" />
              <span>￥{{ v.originprice }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
    
    <script>
  import axios from "axios";
  export default {
    methods: {
      //跳转到详情的方法 v:商品id
      particulars(v) {
        // this.$router.push({
        //   name: "hello",
        //   query: {
        //     proid: v.proid,
        //   },
        // });
      },
    },
    mounted() {
      axios({
        url: "http://118.178.238.19:3001/api/pro/seckilllist",
        params: {
          count: 1,
          limitNum: 6,
        },
        method: "get",
      }).then((res) => {
        this.goodss = res.data.data;
      });
  
      if (this.time.getHours() % 2 == 0) {
        this.hour = this.time.getHours() + 2;
        // this.time1 = this.time1 * 2;
      } else {
        this.hour = this.time.getHours() + 1;
        // this.time1 = this.time1 * 1;
      }
      let td = new Date();
      td.setMinutes(0);
      td.setHours(this.hour);
      td.setSeconds(0);
      let td1 = new Date();
      this.time1 = td.getTime() - td1.getTime()
    },
    data() {
      return {
        goodss: [],
        unrelated: "",
        time: new Date(),
        times: ["", "", ""],
        hour: "",
        time1: 1 * 60 * 60 * 1000,
      };
    },
  };
  </script>
        
    <style scoped>
  .nev {
    width: 100vw;
    height: 42vw;
    background-color: #f6f6f6;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .seckilling {
    width: 94.66666667vw;
    height: 36vw;
    background-color: #fff;
    /* margin: auto; */
    border-radius: 4vw;
  }
  .seckilling .seckillingup {
    width: 94.66666667vw;
    height: 9.06666667vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: 0 0/94.66666667vw 9.06666667vw url(@/assets/秒杀背景上.png)
      no-repeat;
  }
  .seckilling .seckillingup .left {
    display: flex;
    width: 48.26666667vw;
    align-items: center;
    height: 100%;
    color: #ff2727;
  }
  .seckilling .seckillingup .left .left1 {
    font-size: 3.33333333vw;
    color: #333;
  }
  .seckilling .seckillingup .left .left2 {
    font-size: 3.33333333vw;
    color: #ff2727;
  }
  .seckilling .seckillingup .left .left3 {
    width: 5.46666667vw;
    height: 4.66666667vw;
  }
  .seckilling .seckillingup .left .left4 {
    width: 4vw;
    height: 4.8vw;
    background-color: #ff2727;
    font-size: 1.6vw;
    color: #fff;
    border-radius: 1.33333333vw;
  }
  .seckilling .seckillingup .right {
    display: flex;
    width: 21.86666667vw;
    align-items: center;
    height: 100%;
    color: #f23030;
    font-size: 3.33333333vw;
  }
  .seckilling .seckillingup .right .right1 {
    width: 3.33333333vw;
  }
  .seckilling .seckillingdown {
    width: 94.66666667vw;
    height: 26.66666667vw;
    margin: auto;
    overflow: hidden;
  }
  .seckilling .seckillingdown .seckillingdownson {
    height: 26.66666667vw;
    overflow: scroll;
    display: flex;
    justify-content: space-between;
  }
  .seckilling .seckillingdown .seckillingdownson .goods {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 14.06666667vw;
    height: 27.2vw;
    margin: 0.16666667vw;
    text-align: center;
  }
  .seckilling .seckillingdown .seckillingdownson .goods img {
    width: 14.33333333vw;
    height: 15.33333333vw;
  }
  .seckilling .seckillingdown .seckillingdownson .goods span {
    width: 14.33333333vw;
    display: block;
    height: 4.2vw;
    color: #f2270c;
    font-size: 3.46666667vw;
    overflow: hidden;
  }
  .seckilling .seckillingdown .seckillingdownson .query {
    width: 5.33333333vw;
    height: 26.66666667vw;
    display: flex;
    color: #666;
    background-color: #f5f5f5;
    font-size: 1.86666667vw;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .seckilling .seckillingdown .seckillingdownson .query .jl {
    width: 3.2vw;
    height: 3.2vw;
    background: -28.53333333vw -29.2vw/53.33333333vw 53.33333333vw url(@/assets/精灵2.png)
      no-repeat;
  }
  .seckilling .seckillingdown .seckillingdownson .query {
    text-align: center;
  }
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
  </style>